import React, { Fragment, useState } from 'react'
import { Button, Modal, Input, Typography, message } from 'antd';
import ReactNbsp from 'react-nbsp'
import { post } from '../../../../../../ajax/axios'
import { Api } from '../../../../../../ajax/api'

interface PropsInterface {
  title: string,
  type: string
}

const Decoding = function (props: PropsInterface) {

  const [visible, setVisible] = useState(false)
  const [inputData, setInputData] = useState('')
  const [value, setValue] = useState('')

  const textChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputData(event.target.value)
  }

  const okBtnClick = () => {
    if (!inputData) {
      message.error('请输入数据')
      return
    }
    post(Api.coding.base64, {
      code: inputData,
      type: props.type
    }).then((data: any) => {
      setValue(data)
    }).catch(() => {})
  }

  return (
    <Fragment>
      <Button size='small' onClick={() => setVisible(true)} type="primary">{ props.title }</Button>
      <ReactNbsp></ReactNbsp>
      <Modal
        title={ props.title }
        onOk={ okBtnClick }
        afterClose={ () => setValue('') }
        destroyOnClose
        visible={visible}
        onCancel={() => setVisible(false)}
      >
        <Input.TextArea onChange={textChange} placeholder='请输入'></Input.TextArea>
        {
          value ?
            <Fragment>
              <br /><br />
              <Typography.Paragraph copyable>{value}</Typography.Paragraph>
            </Fragment>
            :
            null
        }
      </Modal>
    </Fragment>
  )
}

export default Decoding